<template>
  <div class="post-item" :class="{ 'with-comments': isActive }">
    <div class="post-content">
      <div class="post-header">
        <img :src="post.author.avatar" :alt="post.author.name" class="avatar" />
        <div class="author-info">
          <h3>{{ post.author.name }}</h3>
          <span class="post-time">{{ formatDate(post.createdAt) }}</span>
        </div>
      </div>
      <p>{{ post.content }}</p>
      <div v-if="post.images.length > 0" class="image-group">
        <img
          v-for="(image, index) in post.images"
          :key="index"
          :src="image"
          :alt="`Post image ${index + 1}`"
          class="post-image"
          @click="openImageViewer(index)"
        />
      </div>
      <div class="post-actions">
        <button @click="handleLike" :class="{ 'is-liked': isLiked }">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path
              d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
            ></path>
          </svg>
          {{ post.likes }}
        </button>
        <button @click="$emit('toggle-comments')">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path
              d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
            ></path>
          </svg>
          {{ post.comments }}
        </button>
      </div>

      <!-- <comment-section v-if="isActive" :post-id="post.id" /> -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
//import CommentSection from './CommentSection.vue'

const props = defineProps({
  post: {
    type: Object,
    required: true
  },
  isActive: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['toggle-comments'])
console.log(emit)
const isLiked = ref(false)

const handleLike = () => {
  if (!isLiked.value) {
    // eslint-disable-next-line vue/no-mutating-props
    props.post.likes++
    isLiked.value = true
  } else {
    // eslint-disable-next-line vue/no-mutating-props
    props.post.likes--
    isLiked.value = false
  }
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const openImageViewer = (index) => {
  // 这里可以实现图片查看器的逻辑
  console.log('Open image viewer for image at index:', index)
}
</script>

<style scoped>
.post-item {
  display: flex;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.post-content {
  flex: 1;
  padding: 20px;
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.author-info h3 {
  margin: 0;
  font-size: 16px;
  color: #1e40af;
}

.post-time {
  font-size: 12px;
  color: #6b7280;
}

.image-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.post-image {
  width: calc(33.333% - 7px);
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

.post-actions {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 15px;
}

.post-actions button {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: #4b5563;
  cursor: pointer;
  font-size: 14px;
}

.post-actions button.is-liked {
  color: #2563eb;
}
</style>
